﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="jquery-ui-1.10.4.custom/css/ui-lightness/jquery-ui-1.10.4.custom.min.css" rel="stylesheet" />
    <style type="text/css">
        #sortable {
            list-style-type: none;
            margin: 0;
            padding: 0;
            width: 200px;
        }

            #sortable li {
                margin: 0 3px 3px 3px;
                padding: 3px 0 3px 25px;
                height: 14px;
            }

                #sortable li span {
                    position: absolute;
                    margin-left: -20px;
                }
    </style>
</head>
<body>
    <div>喜爱的语言排序：</div>
    <ul id="sortable">
        <li class="ui-state-default">
            <span class="ui-icon ui-icon-arrow-1-e" ></span>C
        </li>
        <li class="ui-state-default">
            <span class="ui-icon ui-icon-arrow-1-e"></span>C++
        </li>
        <li class="ui-state-default">
            <span class="ui-icon ui-icon-arrow-1-e"></span>C#
        </li>
        <li class="ui-state-default">
            <span class="ui-icon ui-icon-arrow-1-e"></span>Java
        </li>
        <li class="ui-state-default">
            <span class="ui-icon ui-icon-arrow-1-e"></span>Python
        </li>
        <li class="ui-state-default">
            <span class="ui-icon ui-icon-arrow-1-e"></span>SQL
        </li>
    </ul>
    <button onclick="printOrder();">顺序打印</button>
    <div id="results"></div>

    <script src="scripts/jquery-1.11.0.min.js"></script>
    <script src="jquery-ui-1.10.4.custom/js/jquery-ui-1.10.4.custom.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#sortable").sortable();
        });
        function printOrder() {
            $("#results").html("");
            $("#sortable li").each(function (index, item) {
                $("<p>" + $(item).text() + "</p>").appendTo("#results");
            });
        }
    </script>
</body>
</html>
